<template>
    <el-dialog title="公司" v-model="dialogVisible" @opened="dialogOpen" width="600px">
        <div class="company-info">
            <el-row type="flex" class="row" align="middle" :gutter="10">
                <el-col :span="4">
                    <span class="label">代码</span>
                </el-col>
                <el-col :span="8">
                    <el-input ref="codeRef" :disabled="!isAdd" v-model="company.code" size="small" />
                </el-col>
                <el-col :span="4">
                    <span class="label">名称</span>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="company.name" size="small" />
                </el-col>
            </el-row>
            <el-row type="flex" class="row" align="middle" :gutter="10">
                <el-col :span="4">
                    <span class="label">持仓</span>
                </el-col>
                <el-col :span="8">
                    <el-input-number :min="0" :precision="0" :controls="false" v-model="company.shares" size="small" />
                </el-col>
                <el-col :span="4">
                    <span class="label">年初复权价</span>
                </el-col>
                <el-col :span="8">
                    <el-input-number
                        :min="0"
                        :precision="2"
                        :controls="false"
                        v-model="company.startPrice"
                        size="small"
                    />
                </el-col>
            </el-row>

            <el-row type="flex" class="row" align="middle" :gutter="10">
                <el-col :span="4">
                    <span class="label">年内买点(亿)</span>
                </el-col>
                <el-col :span="8">
                    <el-input-number
                        :min="0"
                        :precision="0"
                        :controls="false"
                        v-model="company.buyValue"
                        size="small"
                    />
                </el-col>
                <el-col :span="4">
                    <span class="label">年内卖点(亿)</span>
                </el-col>
                <el-col :span="8">
                    <el-input-number
                        :min="0"
                        :precision="0"
                        :controls="false"
                        v-model="company.sellValue"
                        size="small"
                    />
                </el-col>
            </el-row>
            <el-row type="flex" class="row" align="middle" :gutter="10">
                <el-col :span="4">
                    <span class="label">三年估值(亿)</span>
                </el-col>
                <el-col :span="8">
                    <el-input-number
                        :min="0"
                        :precision="0"
                        :controls="false"
                        v-model="company.estimatedValue"
                        size="small"
                    />
                </el-col>
                <el-col :span="4">
                    <span class="label">当前市值(亿)</span>
                </el-col>
                <el-col :span="8">
                    {{ toFixed(company.marketValue) }}
                </el-col>
            </el-row>
            <el-row type="flex" class="row" align="top" :gutter="10">
                <el-col :span="4">
                    <span class="label" style="padding-top:2px;">估值备注</span>
                </el-col>
                <el-col :span="20">
                    <el-input type="textarea" :rows="4" placeholder="请输入估值理由" v-model="company.remark"> </el-input>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelClick">取 消</el-button>
                <el-button type="primary" @click="okClick">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { Company } from '@/types/company';
import {
    defineComponent, nextTick, PropType, ref,
} from 'vue';
import { useCompany } from '@/components/utils/useCompany';

export default defineComponent({
    props: {
        isAdd: {
            type: Boolean,
            required: true,
        },
        visible: {
            type: Boolean,
            required: true,
        },
        editCompany: {
            type: Object as PropType<Company>,
            required: true,
        },
    },
    emits: ['updateCompany', 'update:visible'],
    setup(props, { emit }) {
        const codeRef = ref();
        const dialogOpen = () => {
            if (props.isAdd) {
                codeRef.value.focus();
            }
        };
        const toFixed = (value: number) => (value ? value.toFixed(2) : '');
        return {
            codeRef,
            dialogOpen,
            toFixed,
            ...useCompany(props, emit),
        };
    },
});
</script>

<style scoped lang="scss">
.company-info {
    .row {
        margin: 5px 0;
    }
    .label {
        display: inline-block;
    }

    ::v-deep(.el-input-number) {
        width: 100%;
        .el-input__inner {
            text-align: left;
        }
    }
}
</style>
